<template>
  <div class="mobile-layout" :style="{ backgroundColor: '#f5f5f7' }">
    <header class="fixed-bar">
      <div class="icon">
        <img src="../assets/imgs/favicon.ico" alt="logo" />
      </div>
      <h1 class="title">伊索云数据屏</h1>
    </header>
    <div class="content">
      <div class="content-header">
        <div>用户信息：</div>
        <div v-if="customer" class="customer-info">{{ customer }}</div>
        <el-button type="info" @click="logout">注销登录</el-button>
      </div>
      <div class="content-card-header">
        <div class="content-card-header-title1">今日完成包裹数量。</div>
        <div class="content-card-header-title2">单位：个数</div>
      </div>
      <el-card
        v-if="todyPackQuantilitydata && userId === '1001'"
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 300px;
        "
      >
        <HorizontalBarMobile
          v-if="todyPackQuantilitydata"
          class="h-5/5 box-border pb-4"
          :data="todyPackQuantilitydata.data.regionData"
        />
      </el-card>
      <el-card
        v-if="todyPackQuantilitydata && userId !== '1001'"
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 70px;
        "
      >
        <HorizontalBarMobileCustomer
          v-if="todyPackQuantilitydata"
          class="h-5/5 box-border pb-4"
          :data="todyPackQuantilitydata.data.regionData"
        />
      </el-card>

      <div class="content-card-header">
        <div class="content-card-header-title1">今日包裹利用率。</div>
        <div class="content-card-header-title2">单位：百分比</div>
      </div>
      <el-card
        v-if="todyPackQuantilitydata && userId === '1001'"
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 300px;
        "
      >
        <HorizontalBarMobile2
          v-if="todyPackQuantilitydata"
          class="h-5/5 box-border pb-4"
          :data="todyPackQuantilitydata.data.regionData"
        />
      </el-card>
      <el-card
        v-if="todyPackQuantilitydata && userId !== '1001'"
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 70px;
        "
      >
        <HorizontalBarMobile2Customer
          v-if="todyPackQuantilitydata"
          class="h-5/5 box-border pb-4"
          :data="todyPackQuantilitydata.data.regionData"
        />
      </el-card>
      <div class="content-card-header">
        <div class="content-card-header-title1">报警信息。</div>
        <div class="content-card-header-title2">详情</div>
      </div>
      <el-card
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 300px;
        "
      >
        <WarnMsg
          v-if="warnMsg"
          class="h-5/5 box-border pb-4"
          :data="warnMsg.data.warnData"
        />
      </el-card>
      <div v-if="userId !== '1001'">
        <div class="content-card-header">
          <div class="content-card-header-title1">料仓库存信息。</div>
          <div class="content-card-header-title2">单位：托</div>
        </div>
        <el-card
          style="
            max-width: 480px;
            margin-left: 20px;
            margin-right: 20px;
            border-radius: 10px;
          "
        >
          <HorizontalBarMobile3
            v-if="findStock"
            class="h-5/5 box-border pb-4"
            :data="findStock.data"
          />
        </el-card>
      </div>
      <div v-if="userId === '1001'">
        <div class="content-card-header">
          <div class="content-card-header-title1">料仓库存信息。</div>
          <div class="content-card-header-title2">单位：托</div>
          <el-button type="primary" @click="showFormDialog">新增库存</el-button>
        </div>
        <el-card
          style="
            max-width: 480px;
            margin-left: 20px;
            margin-right: 20px;
            border-radius: 10px;
          "
        >
          <StockMsgForm
            v-if="findStockForm"
            class="h-5/5 box-border pb-4"
            :data="findStockForm.data.stockData"
          />
        </el-card>
      </div>
      <el-dialog title="添加纸皮库存" v-model="dialogVisible" width="65%">
        <el-form label-position="right" label-width="100px">
          <el-form-item label="客户名">
            <el-input v-model="name"></el-input>
          </el-form-item>
          <el-form-item label="幅宽">
            <el-input v-model="width"></el-input>
          </el-form-item>
          <el-form-item label="托数">
            <el-input v-model="length"></el-input>
          </el-form-item>
          <el-form-item label="每托的张数">
            <el-input v-model="sheet"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <div v-if="userId === '1001'">
        <div class="content-card-header">
          <div class="content-card-header-title1">操作记录日志。</div>
          <div class="content-card-header-title2">详情</div>
        </div>
        <el-card
          style="
            max-width: 480px;
            margin-left: 20px;
            margin-right: 20px;
            border-radius: 10px;
            max-height: 300px;
          "
        >
          <OperationMsgForm
            v-if="opRecord"
            class="h-5/5 box-border pb-4"
            :data="opRecord.data.warnData"
          />
        </el-card>
      </div>
      <div class="content-card-header">
        <div class="content-card-header-title1">检修信息。</div>
        <div class="content-card-header-title2">详情</div>
      </div>
      <el-card
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 300px;
        "
      >
        <OverHaulMobile
          v-if="overHaul"
          class="h-5/5 box-border pb-4"
          :data="overHaul.data.data"
        />
      </el-card>
      <div class="content-card-header">
        <div class="content-card-header-title1">备件库信息。</div>
        <div class="content-card-header-title2">详情</div>
      </div>
      <el-card
        style="
          max-width: 480px;
          margin-left: 20px;
          margin-right: 20px;
          border-radius: 10px;
          max-height: 300px;
        "
      >
        <SparePart
          v-if="partData"
          class="h-5/5 box-border pb-4"
          :partData="partData.data.data"
        />
      </el-card>
      <footer class="footer">
        <span class="copyright"> Copyright © 2024 YISUO . 保留所有权利。 </span>
      </footer>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import HorizontalBarMobile from "../components/HorizontalBarMobile.vue";
import HorizontalBarMobile2 from "../components/HorizontalBarMobile2.vue";
import HorizontalBarMobile3 from "../components/HorizontalBarMobile3.vue";
import HorizontalBarMobileCustomer from "../components/HorizontalBarMobileCustomer.vue";
import HorizontalBarMobile2Customer from "../components/HorizontalBarMobile2Customer.vue";
import StockMsgForm from "../components/StockMsgForm.vue";
import WarnMsg from "../components/WarrnMsgMobile.vue";
import OperationMsgForm from "../components/OperationMsgForm.vue";
import OverHaulMobile from "../components/OHMobile.vue";
import SparePart from "../components/sparePart.vue";

import {
  getTodayPackagesQuantilityByNameApi,
  getWarmMsgByIdApi,
  findStockByNameApi,
  findStockByNameFormApi,
  resetStockTime2Api,
  getOpRecordsApi,
  getOverHaulApi,
  getPartInApiByName,
} from "../api/packaging.js";
import {
  ElButton,
  ElDialog,
  ElFormItem,
  ElInput,
  ElMessageBox,
  ElMessage,
} from "element-plus";
// 创建一个响应式数据属性来存储 customer 的值
const customer = ref(null);
const userId = ref(null);
const todyPackQuantilitydata = ref(null);
const warnMsg = ref(null);
const opRecord = ref(null);
const findStock = ref(null);
const findStockForm = ref(null);
const dialogVisible = ref(false);
const name = ref("");
const length = ref("");
const width = ref("");
const router = useRouter();
const sheet = ref("");
const overHaul = ref(null);
const partData = ref(null);

const loadDataV2 = async () => {
  // todyPackQuantilitydata.value = await getTodayPackagesQuantilityApi();
  if (userId.value === "1001") {
    customer.value = "伊索";
  }
  todyPackQuantilitydata.value = await getTodayPackagesQuantilityByNameApi(
    userId.value,
    customer.value
  );
  warnMsg.value = await getWarmMsgByIdApi("5", userId.value);
  findStock.value = await findStockByNameApi(customer.value);
  findStockForm.value = await findStockByNameFormApi(customer.value);
  opRecord.value = await getOpRecordsApi();
  overHaul.value = await getOverHaulApi(customer.value);
  
  partData.value = await getPartInApiByName(customer.value);
};

// 在组件挂载后从 localStorage 获取 customer 的值
onMounted(() => {
  const customerValue = localStorage.getItem("customer");
  const userIdValue = localStorage.getItem("userId");
  if (customerValue) {
    customer.value = customerValue;
  }
  if (userIdValue) {
    userId.value = userIdValue;
  }
  loadDataV2();
});
setInterval(() => {
  loadDataV2();
}, 4000);
function showFormDialog() {
  dialogVisible.value = true;
}
const logout = () => {
  localStorage.removeItem("customer");
  localStorage.removeItem("userId");
  localStorage.removeItem("token");
  router.push("/login");
};
// 确认按钮处理
const confirm = () => {
  // 构建显示内容
  const content = `客户: ${name.value}<br/>幅宽: ${width.value}<br/>托数: ${length.value}<br/>每托张数： ${sheet.value}`;
  ElMessageBox({
    title: "确认",
    message: `请确认添加以下纸皮库存:<br/>${content}`,
    dangerouslyUseHTMLString: true, // 允许 message 中的 HTML
    confirmButtonText: "确定",
    cancelButtonText: "修改",
    type: "warning",
    showConfirmButton: true,
    showCancelButton: true,
  })
    .then(() => {
      submit();
    })
    .catch(() => {
      console.log("用户点击取消按钮");
    });
};
const submit = async () => {
  // 获取输入值
  const nameValue = name.value;
  const widthValue = width.value;
  const lengthValue = length.value;
  const sheetValue = sheet.value;
  const customer = ref(localStorage.getItem("customer") || "");
  // 校验输入是否为空
  if (!nameValue || !widthValue || !lengthValue) {
    ElMessage.error("请输入所有必填项");
    return;
  }

  // 校验输入是否为数字
  if (isNaN(widthValue) || isNaN(lengthValue)) {
    ElMessage.error("幅宽和托数必须为数字");
    return;
  }
  try {
    const response = await resetStockTime2Api(
      nameValue,
      widthValue,
      lengthValue,
      sheetValue,
      customer.value
    );
    console.log("Full Response:", response); // 打印完整的响应对象
    console.log("Response Data:", response.data); // 再次尝试打印数据

    if (response && response.data && response.data.code === 200) {
      ElMessage.success("添加成功: " + response.data.message);
    } else {
      ElMessage.error("提交失败: " + (response?.data?.error || "操作未成功"));
    }
  } catch (error) {
    console.error("请求失败:", error);

    if (error.response) {
      // 后端返回的错误信息
      ElMessage.error("请求失败: " + error.response.data.message);
    } else if (error.message) {
      // 请求错误，但非后端返回，如网络错误
      ElMessage.error("请求失败: " + error.message);
    } else {
      // 其他错误
      ElMessage.error("请求失败");
    }
  }

  dialogVisible.value = false;
};
</script>


<style scoped>
.mobile-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fixed-bar {
  background-color: #f5f5f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 增加阴影以提升视觉效果 */
  height: 50px;
}
.icon img {
  width: 1.5rem; /* 适应移动端的图标大小 */
  height: 1.5rem;
}

.title {
  color: #1d1d1f;
  font-size: 1rem; /* 适应移动端的字体大小 */
  margin: 0;
  font-weight: bold;
}
.content {
  padding-top: 3.5rem; /* 根据固定栏的高度调整，确保内容不被遮挡 */
  width: 100%;
  flex-grow: 1;
  overflow-y: auto;
}
.content-header {
  padding: 0px 0px 10px 0px;
  background-color: #000000;

  font-size: 14px;
  padding: 16px;
  color: #eeeeee;
  display: flex;
  border-radius: 5px;

  justify-content: space-between;
}
.content-card-header {
  margin: 17px 26.75px 10px 22px;
  display: flex;
}
.content-card-header-title1 {
  font-size: 20px;
  color: #1d1d1f;
  font-weight: bold;
}
.content-card-header-title2 {
  font-size: 20px;
  color: #6e6e73;
  font-weight: bold;
}
.customer-info {
  /* 在这里添加您想要的样式 */
  margin-left: 8px; /* 与前一个元素的间距 */
  color: #76b900; /* 字体颜色 */
  font-weight: bold;
}
.footer {
  text-align: center; /* 文本居中对齐 */
  padding: 20px 0; /* 添加上下边距 */
  font-size: 0.875em; /* 适中的字体大小 */
  color: #666; /* 较淡的字体颜色 */
  margin-left: 20px;
}
.el-button {
  margin-left: auto; /* 将按钮移动到最右边 */
}

.copyright {
  line-height: 1.5; /* 增加行高 */
  margin: 0; /* 移除默认的边距 */
}

@media (min-width: 768px) {
  .title {
    font-size: 1.25rem; /* 大屏幕上的字体大小 */
  }
  .icon img {
    width: 2rem;
    height: 2rem;
  }
}
</style>


